/**
 * Created by maxiaoqiang on 2018/8/16.
 */
import React, {Component} from "react";

import {Row, Col, Button, Input, Select, Radio, Checkbox, Icon} from "antd";
import {formatChar} from "util/MyUtil";
import "./index.less";

const {TextArea} = Input;
const RadioGroup = Radio.Group;
const CheckboxGroup = Checkbox.Group;


class ExamContent extends Component{

    constructor(props){
        super(props);
        this.state={
            questionType:1,
            title:"我是题目我是题目我是题目我是题目我是题目我是题目",
            content:[
                {id:1,content:"我是选项1"},
                {id:2,content:"我是选项2"},
                {id:3,content:"我是选项3"},
                {id:4,content:"我是选项4"},
            ]
        }
    }

    render(){
        return(
            <div className="exam-content">
                <div className="title">
                    题目<span>1</span>
                </div>
                <div>
                    {this.state.title}
                </div>

                <div className="content-div">
                    {this.state.questionType==0?
                        <RadioGroup className="option-content">
                            {
                                this.state.content.map((item, idx)=> {
                                    return (
                                        <Radio key={idx} className="radioStyle" value={idx}>
                                            {formatChar(idx)}: {item.content}
                                        </Radio>
                                    )
                                })
                            }
                        </RadioGroup>
                        :
                        null
                    }
                    {this.state.questionType==1?
                        <CheckboxGroup
                            className="radioGroupStyle"
                            onChange={this.changeCheckBox}
                        >
                            {this.state.content ?
                                this.state.content.map((item, idx)=> {
                                    return (
                                        <Checkbox key={idx} className="radioStyle" value={idx}>
                                            {formatChar(idx)}:{item.content}
                                        </Checkbox>
                                    )
                                })
                                :
                                null
                            }
                        </CheckboxGroup>
                        :
                        null
                    }
                    {this.state.questionType==2?
                        <RadioGroup className="option-content">
                            {
                                this.state.content.map((item, idx)=> {
                                    return (
                                        <Radio key={idx} className="radioStyle" value={idx}>
                                            {formatChar(idx)}: {item.content}
                                        </Radio>
                                    )
                                })
                            }
                        </RadioGroup>
                        :
                        null
                    }
                    {this.state.questionType==3?
                        <TextArea className="question-input" placeholder="请输入答案解析"
                                  autosize={{ minRows: 4, maxRows: 6 }}/>
                        :
                        null
                    }
                </div>
                <div className="btn-div">
                    <Row gutter={16}>
                        <Col span={4}>
                            <Button type="primary">确定</Button>
                        </Col>
                        <Col offset={12} span={8}>
                            <Row gutter={16}>
                                <Col className="gutter-row" span={12}>
                                    <Button>上一题</Button>
                                </Col>
                                <Col className="gutter-row" span={12}>
                                    <Button>下一题</Button>
                                </Col>
                            </Row>
                        </Col>
                    </Row>
                </div>
            </div>
        )
    }

}

export default ExamContent;